window.addEventListener('load', function () {
    var img = document.querySelector('.preview_img');
    var mask = document.querySelector('.preview_img_mask');
    var big = document.querySelector('.preview_img_big');
    var big_img = big.querySelector('img');
    img.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    img.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    img.addEventListener('mousemove', function (e) {
        var maskX = e.pageX - img.offsetLeft - mask.offsetWidth / 2;
        var maskY = e.pageY - img.offsetTop - mask.offsetHeight / 2;
        var maskMax = img.offsetWidth - mask.offsetWidth;
        var bigMax = big.offsetWidth - big_img.offsetWidth;
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskMax) {
            maskX = maskMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMax) {
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        big_img.style.left = bigMax * maskX / maskMax + 'px';
        big_img.style.top = bigMax * maskY / maskMax + 'px';
    })
    big.addEventListener('mousemove', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    })
})